<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      
    }
  },
  mounted(){
    this.fontSize();
  },
  methods:{
    fontSize(){
      // 控制font-size尺寸
        var _self = this;
        _self.width = 750; //设置默认最大宽度
        _self.fontSize = 100; //默认字体大小
        _self.widthProportion = function() {
            var p = document.documentElement.offsetWidth / _self.width;
            return p > 1 ? 1 : p < 0.42 ? 0.42 : p;
        };
        _self.changePage = function() {
            document.documentElement.setAttribute("style", "font-size:" + _self.widthProportion() * _self.fontSize + "px !important");
        }
        _self.changePage();
        window.addEventListener("resize", function() {
            _self.changePage();
        }, false);
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  /* margin-top: 60px; */
}
*{
  margin: 0;
  padding: 0;
}
@media only screen and (max-width: 1000px) {
    *{
      font-size: 18px;
    }
}
</style>
